<template>
  <div id="scene">
    <div id="select">
      <div class="xuanxinag" id="hyh">
        <img src="./xuanxiang/幻夜黑.png" alt="" />
      </div>
      <div class="xuanxinag" id="jgz">
        <img src="./xuanxiang/极光紫.png" alt="" />
      </div>
      <div class="xuanxinag" id="jgl">
        <img src="./xuanxiang/极光蓝.png" alt="" />
      </div>
      <div class="xuanxinag" id="shh">
        <img src="./xuanxiang/珊瑚红.png" alt="" />
      </div>
    </div>
    <div class="sxt" id="sxt" style="display: none">
      <img
        src="./关闭.png"
        id="close"
        style="width: 40px; height: 40px"
        class="guanbi"
        alt=""
      />
      <p style="padding: 10px 4px; font-size: 18px">双摄像头</p>
      <p style="padding: 10px 24px; font-size: 16px">
        后置主摄像头——1300万像素(F/1.8光圈)
      </p>
      <p style="padding: 10px 24px; font-size: 16px">
        后置副摄像头——200万像素的
      </p>
    </div>
  </div>
</template>
<style scoped>
.guanbi {
  position: absolute;
  top: 0px;
  right: 0px;
}
p {
  color: #fff;
}
.sxt {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  position: relative;
  background: #000;
  left: 909px;
}
</style>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// import model from "./model.gltf"

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";
import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
import px from "./envMap/px.jpg";
import nx from "./envMap/nx.jpg";
import py from "./envMap/py.jpg";
import ny from "./envMap/ny.jpg";
import pz from "./envMap/pz.jpg";
import nz from "./envMap/nz.jpg";
import base from "./basecolor.png";
import hyh from "./幻夜黑.png";
import jgz from "./极光紫.png";
import jgl from "./极光蓝.png";
import shh from "./珊瑚红.png";
import gd from "./光点.png";
import zt from "three/examples/fonts/helvetiker_bold.typeface.json";
import { Vector2 } from "three";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      const scene = new THREE.Scene();
      const width = window.innerWidth;
      const height = window.innerHeight;

      const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      scene.add(camera);
      const ambient = new THREE.AmbientLight(0xffffff, 0.4);
      scene.add(ambient);
      const directionlight = new THREE.DirectionalLight(0xffffff, 1);
      directionlight.position.set(500, 500, 500);
      scene.add(directionlight);
      camera.position.set(300, 0, 300);
      camera.lookAt(0, 0, 0);
      const axesHelper = new THREE.AxesHelper(100);
      scene.add(axesHelper);
      // const geomatry=new THREE.BoxGeometry(50,50,50);
      // const material=new THREE.MeshLambertMaterial({
      //     color:0xff0000
      // })
      // const mesh=new THREE.Mesh(geomatry,material);
      // scene.add(mesh)
      const loader = new GLTFLoader();
      const textureloader = new THREE.TextureLoader();
      const texturecube = new THREE.CubeTextureLoader().load(
        px,
        nx,
        py,
        ny,
        pz,
        nz
      );
      const geomatry = new THREE.BufferGeometry();
      var R = 50;
      const arc = new THREE.ArcCurve(
        0,
        0,
        R,
        Math.PI / 2 + Math.PI / 6,
        Math.PI / 2 - Math.PI / 6
      );
      const pointerArr = arc.getPoints(50);
      geomatry.setFromPoints(pointerArr);
      const material = new THREE.LineBasicMaterial({
        color: 0xffffff,
      });
      const line = new THREE.Line(geomatry, material);
      line.rotateX(Math.PI / 2);
      line.position.y = -78;
      scene.add(line);
      let mesh = null;
      let sprite = null;
      loader.load("./手机.glb", (e) => {
        console.log(e);

        mesh = e.scene.children[0];
        e.scene.traverse((obj) => {
          if (obj.isMesh) {
            console.log(obj.material);
            obj.material = new THREE.MeshStandardMaterial({
              metalness: 1.0,
              roughness: 0.5,
              envMap: texturecube,
              map: textureloader.load(base),
              transparent: true,
            });
          }
        });
        scene.add(e.scene);
        const fontobject3d = e.scene.getObjectByName("后置摄像头位置");
        const texture = new THREE.TextureLoader().load(gd);
        const spriteMaterial = new THREE.SpriteMaterial({
          map: texture,
          transparent:true,
        });
        sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(6, 6, 2);
        const pos = new THREE.Vector3();
        fontobject3d.getWorldPosition(pos);
        sprite.position.copy(pos);
        sprite.position.x -= 6;
        sprite.position.z -= 4;
        scene.add(sprite);
        console.log(scene);
      });
      var loader1 = new THREE.FontLoader();
      loader1.load("./helvetiker_bold.typeface.json", (e) => {
        console.log(e);
        const fontmaterial = new THREE.MeshLambertMaterial({
          color: 0xffffff,
          side: THREE.DoubleSide,
        });
        const shapes = e.generateShapes("720", 10);
        const shapesgeomatry = new THREE.ShapeGeometry(shapes);
        const textMesh = new THREE.Mesh(shapesgeomatry, fontmaterial);
        textMesh.position.z = R;
        textMesh.position.x = -12;
        textMesh.position.y = -78;
        scene.add(textMesh);
      });
      const render = new THREE.WebGL1Renderer({
        antialias: true,
      });
      render.outputEncoding = THREE.sRGBEncoding;
      render.setSize(width, height);
      document.getElementById("scene").appendChild(render.domElement);
      window.onresize = function () {
        const width = window.innerWidth;
        const height = window.innerHeight;
        render.setSize(width, height);
        css2render.render(scene, camera);
        const s = 200;
        // const k = width / height;
        // camera.left = -s * k;
        // camera.right = s * k;
        // camera.top = s;
        // camera.bottom = -s;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      };
      document.getElementById("hyh").addEventListener("click", (e) => {
        console.log(mesh);
        const mesh1 = scene.getObjectByName("手机");
        console.log(mesh1);
        mesh1.material.map = textureloader.load(hyh);
      });
      document.getElementById("jgz").addEventListener("click", (e) => {
        console.log(mesh);
        const mesh1 = scene.getObjectByName("手机");
        console.log(mesh1);
        mesh1.material.map = textureloader.load(jgz);
      });
      document.getElementById("jgl").addEventListener("click", (e) => {
        console.log(mesh);
        const mesh1 = scene.getObjectByName("手机");
        console.log(mesh1);
        mesh1.material.map = textureloader.load(jgl);
      });
      document.getElementById("shh").addEventListener("click", (e) => {
        console.log(mesh);
        const mesh1 = scene.getObjectByName("手机");
        console.log(mesh1);
        mesh1.material.map = textureloader.load(shh);
      });
      let ss = 0;
      const css2render = new CSS2DRenderer();
      css2render.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("scene").appendChild(css2render.domElement);
      css2render.domElement.style.position = "absolute";
      css2render.domElement.style.top = "0px";
      css2render.domElement.style.pointerEvents = "none";

      function renderer() {
        if (mesh !== null) {
          mesh.rotateY(0.01);
          // sprite.rotateY(0.01);
        }
        if (sprite !== null) {
          ss += 0.01;

          if (ss < 0.5) {
            sprite.scale.x = 6 * (1 + ss);
            sprite.scale.y = 6 * (1 + ss);
          } else if (ss >= 0.5 && ss < 1.0) {
            sprite.scale.x = 6 * (2 - ss);
            sprite.scale.y = 6 * (2 - ss);
          } else {
            ss = 0.0;
          }
        }
        render.render(scene, camera);
        css2render.render(scene, camera);
        requestAnimationFrame(renderer);
      }
      let show = null;
      let div = document.getElementById("sxt");
      let tag = new CSS2DObject(div);
      let choose = null;
      let intersectObject = null;
      let TWEEN = require("@tweenjs/tween.js");
      render.domElement.addEventListener("click", (e) => {
        const px = e.offsetX;

        const py = e.offsetY;
        const x = (px / window.innerWidth) * 2 - 1;
        const y = (-py / window.innerHeight) * 2 + 1;
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
        console.log(raycaster);

        intersectObject = raycaster.intersectObjects([sprite]);
        console.log(intersectObject);
        if (intersectObject.length > 0) {
          document.getElementById("sxt").style.display = "block";
        }
      });
      document.getElementById("close").addEventListener("click",e=>{
          document.getElementById("sxt").style.display = "none";
        
      })
      renderer();
      const controls = new OrbitControls(camera, render.domElement);
    },
  },
};
</script>
<style scoped>
#scene {
  width: 100%;
  height: 100%;
  position: relative;
}
#select {
  color: #fff;
  position: absolute;
  bottom: 60px;
  left: 600px;
  overflow: hidden;
}
.xuanxinag img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.xuanxinag {
  float: left;

  margin-right: 20px;
}
</style>